<!--
 * @Description: 新建、编辑抓包列表
 * @Author: 0001101008/HuYuxi
 * @Date: 2021-09-28 14:59:18
 * @LastEditTime: 2021-10-08 16:01:03
 * @LastEditors: 0001101008/HuYuxi
-->
<template>
  <el-dialog
    :title="dialogTitle"
    :close-on-click-modal="false"
    width="500px"
    :visible.sync="dialogStatus"
    @close="cancel"
  >
    <el-form
      ref="packetsForm"
      :model="form"
      :rules="rules"
      label-width="80px"
      label-position="right"
    >
      <!-- 配置名称 -->
      <el-form-item label="配置名称" prop="name">
        <el-input v-model="form.name" placeholder="填写配置名称"></el-input>
      </el-form-item>
      <!-- 接口选择 -->
      <el-form-item label="接口选择" prop="intfName">
        <el-select
          v-model="form.intfName"
          style="width:100%;"
          :disabled="form.id ? true: false"
          @change="changePort"
        >
          <el-option v-for="(item, index) in portList" :key="index" :value="item.name">{{item.name}}</el-option>
        </el-select>
      </el-form-item>
      <!-- 接口状态 -->
      <el-form-item label="接口状态" prop="status">
        <el-input v-model="form.status" placeholder style="width:100%;" disabled></el-input>
      </el-form-item>
      <!-- 方向 -->
      <el-form-item label="方向" prop="direction">
        <el-select v-model="form.direction" style="width:100%;">
          <el-option
            v-for="(item, index) in directionList"
            :key="index"
            :value="item.value"
            :label="item.label"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="onSubmit">确认</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: ['ne', 'type', 'dialogStatus', 'packetsInfo', 'portList'],
  data () {
    return {
      dialogTitle: '新建抓包配置',
      form: {
        id: null,
        name: null,
        intfName: null,
        status: null,
        direction: null,
      },
      directionList: [
        { value: 'rx', label: '入向' },
        { value: 'tx', label: '出向' },
        { value: 'bidirection', label: '双向' },
      ],
      rules: {
        name: [{
          required: true,
          message: '请输入配置名称',
          trigger: 'blur'
        }],
        intfName: [{
          required: true,
          message: '请选择接口',
          trigger: 'change'
        }],
        direction: [{
          required: true,
          message: '请选择抓包方向',
          trigger: 'change'
        }]
      }
    };
  },
  watch: {
    type: {
      immediate: true,
      handler (val) {
        let _this = this;
        if (val === 'create') {
          _this.dialogTitle = '新建抓包配置';
          _this.form = {
            id: null,
            name: null,
            intfName: null,
            direction: null,
            status: null,
          };
        } else {
          _this.dialogTitle = '编辑抓包配置';
          _this.form = {
            id: _this.packetsInfo.id,
            name: _this.packetsInfo.name,
            intfName: _this.packetsInfo.intfName,
            direction: _this.packetsInfo.direction,
            status: _this.packetsInfo.status ? 'DOWN' : 'UP'
          };
        }
      }
    }
  },
  methods: {
    // 取消
    cancel () {
      let _this = this;
      _this.$refs['packetsForm'].resetFields();
      _this.$emit('handleDialog', false);
      _this.clearData();
    },
    // 清空数据
    clearData () {
      let _this = this;
      _this.form = {
        id: null,
        name: null,
        intfName: null,
        direction: null,
        status: null,
      };
    },
    // 选择端口 过滤状态
    changePort (val) {
      let _this = this;
      if (val) {
        for (let i = 0; i < _this.portList.length; i++) {
          if (_this.portList[i].name === val) {
            _this.form.status = !_this.portList[i].status ? 'UP' : 'DOWN';
          }
        }
      }
    },
    // 确认
    onSubmit () {
      let _this = this;
      _this.$refs['packetsForm'].validate((valid) => {
        if (valid) {
          let params = {
            neId: _this.ne.id,
            name: _this.form.name,
            intfName: _this.form.intfName,
            direction: _this.form.direction,
            status: _this.form.status === 'UP' ? false : true
          };
          if (_this.form.id) {
            params.id = _this.form.id;
          }
          let url = _this.form.id ? '/api/sdwan/wireshark/update' : '/api/sdwan/wireshark/create';
          _this.$http.post({
            url: url,
            data: params
          }).then(res => {
            let { status } = res;
            if (status === '0') {
              if (_this.form.id) {
                _this.$message.success('更新成功！');
              } else {
                _this.$message.success('创建成功！');
              }
              _this.$emit('handleDialog', false);
              _this.clearData();
              _this.$parent.refresh();
              _this.$parent.getProtList();
            }
          });
        } else {
          _this.$message.error('请检查必填项！');
        }
      });
    }
  }
};
</script>